<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
<script src="${ctx}/js/controllers/store/bindphone/bindPhone.js" type="text/javascript"></script>
<link rel="stylesheet" href="${ctx }/css/dlifestyle/store.css"/>
<style type="text/css">
	.location{
		height:43px;
		/* width:95%; */
		width:100%;
		margin-left:-1px;
		margin-top:-1px;
		border-bottom:1px solid #e6e6e6;
		background-color:#f5f5f5
	}
	.panel .location{
		margin:0;
	}
	.location img{
		margin-left:24px;
		margin-top:10px;
		
		margin-bottom:12px;
	}
	.form div img{
		float:left;
		top:10px;
		margin-left:22px;
		padding-top:10px;
 		position:relative;
		left:20px;
		top:-2px; 
	}
	.form div input{
		height:35px;
		width:20%;
		border-radius:4px;
		border:1px solid #dadada;
		padding-left:40px;
		font:14px 微软雅黑;
		width:435px;
		margin-left:-10px;
	}
	.emStyle{
		color:#98bfe4;
	}
	
	.buttonEdit{
	    width:360px;
	    height:40px;
	    font-size:14px;
	    border-radius: 4px;
	    background-color: #98bfe4;
	    color:#fff;
	    border: none;
	    margin-top:28px;
	    font-weight:700;
	 }
	.buttonCancle{
	    width:124px;
	    height:36px;
	    font-size:14px;
	    border-radius: 4px;
	    background-color: #fff;
	    color:#504949;
	    border: 1px solid #D1CFCF;
	    margin-top:28px;
     }
</style>
    <div style="top:130px;position:fixed;height:30px;font-size: 14px;font-family: '微软雅黑';margin-left:-236px;">
				当前位置:${sessionScope.currcent_position}
    </div>
	<section style="padding-top:20px;">
		<section>
			<div class="panel" style="min-height:500px;border:1px solid #e6e6e6;">
			<input id="userId" type="hidden" value="${user.id }" />
                <div class="location"><img src="${ctx }/images/store/bindphone.png"/>
                <span style="margin-left:10px;margin-top:14px;font-size:14px;color:#414043;font:14px 微软雅黑">绑定手机</span>
                </div>
				<div id="form" class="form" style="padding-top:50px;height:285px;/* width:95% */;/* border:1px solid #e6e6e6;border-bottom:0; */margin-top:27px;"> 
						<span style="display:block;float:left;margin-top: 35px;margin-left: 30px;" >
						<c:if test="${type==1 }"><img src="${ctx }/images/store/user_check_blue.png" style="margin-left: 30px;"/></c:if>
						<c:if test="${type==2 }"><img src="${ctx }/images/store/user_check_grey.png" style="margin-left: 30px;"/></c:if>
						<span style="margin-left: 15px;color:#828282;font:14px 微软雅黑" >身份验证</span>
						<c:if test="${type==1 }"><img src="${ctx }/images/store/jiantou_blue.png" style="margin-left: 30px;" /></c:if>
						<c:if test="${type==2 }"><img src="${ctx }/images/store/jiantou_grey.png" style="margin-left: 30px;" /></c:if>
						</span>
						<span style="display:block;float:left;margin-top: 35px;margin-left: 30px;" >
						<c:if test="${type==1 }"><img src="${ctx }/images/store/phone_bind_grey.png" /></c:if>
						<c:if test="${type==2 }"><img src="${ctx }/images/store/phone_bind_blue.png" /></c:if>
						<span style="margin-left: 15px;color:#828282;font:14px 微软雅黑" >绑定新手机</span>
						<c:if test="${type==1 }"><img src="${ctx }/images/store/jiantou_grey.png" style="margin-left: 30px;" /></c:if>
						<c:if test="${type==2 }"><img src="${ctx }/images/store/jiantou_blue.png" style="margin-left: 30px;" /></c:if>
						</span>
						<span style="display:block;float:left;margin-top: 35px;margin-left: 30px;" >
						<img src="${ctx }/images/store/complete_grey.png" />
						<span style="margin-left: 15px;color:#828282;font:14px 微软雅黑" >绑定完成</span>
						</span>
					<br/><br/><br/><br/><br/><br/><br/>
					<label  style="float:left;margin-left:55px;margin-top:19px;padding-top:10px;color:#414043;font:14px 微软雅黑"><em class="emStyle">*</em>
					<c:if test="${type==1 }">&nbsp;原手机</c:if>
					<c:if test="${type==2 }">&nbsp;新手机</c:if>
					</label>
					<div style="margin-top:19px;" >
						<img src="${ctx }/images/store/phone_icon.png" />
						<input id="userPhone" type="hidden" value="${type }" />
						<c:if test="${type==1 }"><input class="editform-control" id="phoneBind"  type="text" class="text" maxlength="50" readonly="readonly" value="${user.phone }"/></c:if>	
						<c:if test="${type==2 }"><input class="editform-control" id="phoneBind"  onblur="checkPhone();"  type="text" class="text" maxlength="50" placeholder="请输入手机号"/></c:if>
					</div>
					<br>
					<label  style="float:left;margin-left:55px;margin-top:19px;padding-top:10px;color:#414043;font:14px 微软雅黑"><em class="emStyle">*</em>&nbsp;&nbsp;验证码</label>
					<div style="margin-top:19px;">
					<input id="sixCode" type="hidden"/>
						<img src="${ctx }/images/store/phone_code.png" />
						<input class="editform-control" id="phoneCode" onblur="checkCode();" type="text" class="text" maxlength="50"  placeholder="请输入6位验证码"/>	
					<button id="sendcode" style="background: #ffaa00;height:35px;width:85px;border:0;color:white;margin-left:12px;border-radius:3px;font:14px 微软雅黑">发送短信</button>
					<input id="resendTime" type="hidden" value="${resendTime }"/>
					<span id="warning" style="margin-left: 5px;font:14px 微软雅黑  #828282;"></span>
					</div>

				</div>
				<div class="foot" style="height:88px;/* width:95%; *//* border:1px solid #e6e6e6; */border-top: 0;">
					<div style="float:left;padding-left:18%;">
						<button class="buttonEdit" onclick="nextStep();">下一步</button>
					</div>
				</div>
			</div>
		</section>
	</section>
	<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
		
	</script>
	<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
	<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
